<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>列表选择框</title>
<style type="text/css">
body{font-size: 12px;position: relative;}
</style>
<link type="text/css" rel="stylesheet" href="jquery.listselect.css"/>
<script type="text/javascript" src="../../js/lib/jquery-1.5.1.min.js"></script>
<script type="text/javascript" src="../../js/lib/jquery.ui-1.8.11.min.js"></script>
<script type="text/javascript" src="jquery.listselect.js"></script>
<script type="text/javascript">
$(function(){
	$(".listselect").listselect();
})
</script>
</head>
<body>
<form action="../../../list.zwork" method="post" name="form">
<!-- 书写这样的一块区域，区域的class为listselect。name是form中的字段名 -->
<div class="listselect" name="listselect" style="width:500px;height: 350px;">
	<!-- list里面是你的数据列表，以key value的形式组成item项。-->
	<div class="list">
		<div class="item" value="2">北京市</div>
		<div class="item" value="3">天津市</div>
		<div class="item" value="4">上海市</div>
		<div class="item" value="5">山西省</div>
	</div>
	<!-- 也可以添加一些默认被选择的， -->
	<div class="selected">
		<div class="item" value="1">山东省</div>
	</div>
</div>
<input type="submit" value="提交"/>
</form>
<div>
<br/>
1、按住ctrl可以多选，但是暂不支持多选以后拖动多个。<br/>
2、如果要多个操作，通过ctrl多选后，选择移动按钮。
</div>
<table cellpadding="0" cellspacing="0" border="0">
	<tr>
		<td align="center" valign="middle"></td>
	</tr>
</table>
</body>
</html>